<template>
  <div class="container">
    <div class="header1" style="padding: 10px; background-color: white; border: solid 1px #e2e2e2; margin-bottom: 15px">
      <div style="display: flex; justify-content: flex-start"></div>
      <div style="display: flex; justify-content: flex-end">
        <a-button class="hte-btn del-btn" @click="handleSave">保存</a-button>
      </div>
    </div>
    <div class="content-list">
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
        <section>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="上级菜单:" prop="parentId">
                <a-tree-select
                  v-model:value="form.parentId"
                  show-search
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="Please select"
                  allow-clear
                  tree-default-expand-all
                  :tree-data="tree"
                  :replaceFields="{ children: 'children', title: 'name', key: 'id', value: 'id' }"
                  @change="changeParent"
                >
                  <template #title="{ value: val, title }">
                    <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
                    <template v-else>{{ title }}</template>
                  </template>
                </a-tree-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="菜单名称:" prop="toUser">
                <a-input v-model="form.name" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="菜单路径:" prop="toDept">
                <a-input v-model="form.path" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="菜单类型:" prop="toUser">
                <CodeSelector
                  type="radio"
                  :codes="codes['typeOptions']"
                  codeKey="code"
                  nameKey="name"
                  :code.sync="form.type"
                  multiple="default"
                ></CodeSelector>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否隐藏:" prop="toDept">
                <CodeSelector
                  type="radio"
                  :codes="codes['hiddenOptions']"
                  codeKey="code"
                  nameKey="name"
                  :code.sync="form.hidden"
                  multiple="default"
                ></CodeSelector>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="页面组件:" prop="title">
                <a-input v-model="form.component" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="跳转地址:" prop="redirect">
                <a-input v-model="form.redirect" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="排序:" prop="sortNum">
                <a-input v-model="form.sortNum" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="24">
              <div class="section-header">菜单属性</div>
              <JsonEditor ref="jsonEditor" v-model="json" style="border: 1px solid #ccc"> </JsonEditor>
            </a-col>
          </a-row>
        </section>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { getQuery } from '@/utils/common.js'
export default {
  components: {
    JsonEditor: () => import('@/components/tools/JsonEditor'),
  },
  data() {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      id: getQuery('id', this),
      form: {
        type: '1',
        hidden: '0',
        parentId: '-1',
      },
      rules: {
        name: [{ required: true, message: '请输入', trigger: 'blur' }],
        path: [{ required: true, message: '请输入', trigger: 'blur' }],
        component: [{ required: true, message: '请输入', trigger: 'blur' }],
        type: [{ required: true, message: '请输入', trigger: 'blur' }],
        hidden: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      json: {},
      urls: {
        list: '/hteSystemMenu/tree',
        info: '/hteSystemMenu/info',
        edit: '/hteSystemMenu/edit',
      },
      codes: {
        typeOptions: [
          { code: '0', name: '目录' },
          { code: '1', name: '菜单' },
          { code: '2', name: '按钮' },
        ],
        hiddenOptions: [
          { code: '0', name: '显示' },
          { code: '1', name: '隐藏' },
        ],
      },
      tree: [],
    }
  },
  created() {},
  mounted() {
    this.fetchTree()
    this.fetchForm()
  },
  watch: {},
  methods: {
    open(id) {
      this.id = id
      this.form = {
        type: '1',
        hidden: '0',
        parentId: '-1',
      }
      this.fetchForm()
    },
    fetchTree() {
      postAction(this.urls.list, {}).then((res) => {
        if (res.success) {
          this.tree = res.result
        } else {
          this.$message.error('查询数据错误:' + res.message)
        }
      })
    },
    fetchForm() {
      if (this.id) {
        getAction(this.urls.info + '?id=' + this.id).then((res) => {
          if (res.success) {
            this.form = res.result
            if (this.form.meta) {
              this.json = JSON.parse(this.form.meta)
            } else {
              this.json = {}
            }
          } else {
            this.$message.error('加载数据失败')
          }
        })
      }
    },
    changeParent() {
      if (!this.form.parentId) {
        this.$set(this.form, 'parentId', '-1')
        this.$set(this.form, 'sortNum', this.tree.length + 1)
      } else {
        let menu = this.findMenu(this.tree, this.form.parentId)
        this.$set(this.form, 'sortNum', menu.children.length + 1)
      }
    },
    findMenu(menus, menuId) {
      for (let m of menus) {
        if (m.id == menuId) {
          return m
        } else if (m.children && m.children.length > 0) {
          let m1 = this.findMenu(m.children, menuId)
          if (m1) {
            return m1
          }
        }
      }
    },
    /**
     * 保存信息
     */
    async handleSave() {
      let valid = await this.$refs.ruleForm.validate()
      if (!valid) {
        this.$messageWorkReport.warning('请根据提示将表单填写完整')
        return false
      }
      let json = this.$refs.jsonEditor.getValue()
      if (json) {
        this.form.meta = json
      }
      postAction(this.urls.edit, this.form).then((res) => {
        if (res.success) {
          if (this.id) {
            this.$message.success('保存成功')
            this.fetchForm()
          } else {
            this.$router.push('/menuEdit?id=' + res.result.id)
          }
        } else {
          this.$message.error('保存失败' + res.message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';
.container {
  .content {
    margin-top: 20px;

    section {
      margin-bottom: 18px;

      .section-table {
        .add-btn {
          margin-left: 0;
          margin-bottom: 10px;
        }

        /deep/ .a-upload__input {
          display: none !important;
        }
      }
    }
  }
}

.tips-box {
  margin-top: 32px;

  .add-btn {
    width: 180px;
    height: 40px;
    line-height: 40px;
    background-color: #4095e4;
    border-radius: 2px;
  }
}

/deep/ .el-upload__input {
  display: none !important;
}
</style>
